<template>
	<view class="code-input">
		<u-navbar  title=""  :border-bottom="false"  >
		</u-navbar>
		<view class="code-input__title">
			<view>我们已经向{{getSafeText(phone)}}发送验证短信</view>
			<view>请输入验证码</view>
		</view>
		<view class="code-input__title"></view>
		<u-message-input mode="bottomLine" :maxlength="codelength" v-model="code" @finish="checkCode"></u-message-input>
		<view v-if="canClick" class="code-input__resend" @click="resend">重新发送</view>
		<view v-else class="code-input__count-text">{{content}}</view>
	</view>
</template>

<script>
	import  axios from "axios";
	import store from "./store.js"
	export default {
		data() {
			return {
				store:store,
				canClick:false,
				content:"",
				totalTime:60,
				code:"",
				codelength:6,
				phone:"",
			}
		},
		mounted(){
			this.phone=this.store.state.phone;
			this.content = this.totalTime + 's后重新发送'
			let clock = window.setInterval(() => {
				this.totalTime--
				this.content = this.totalTime + 's后重新发送'
				if (this.totalTime < 0) {
				window.clearInterval(clock)
				this.content = '重新发送验证码'
				this.totalTime = 60
				this.canClick = true  
			 }
			},1000)
		},
		methods: {
			getSafeText(phone){
				return phone.substring(0,3)+"****"+phone.substring(phone.length-4)
			},
			resend() {
				let phoneCodeData={
					"phone":this.phone,
					"type":3
				}
				if (!this.canClick) return
				this.canClick = false
				axios({
					method:"get",
					url:getApp().$store.state.baseURL+"/user/phonecode",
					params:phoneCodeData,
				}).then((response)=>{
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						uni.showToast({
							title: '验证码发送成功',
							icon:'none',
							duration: 2000
						});
						
						this.content = this.totalTime + 's后重新发送'
						let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's后重新发送'
							if (this.totalTime < 0) {
							window.clearInterval(clock)
							this.content = '重新发送验证码'
							this.totalTime = 60
							this.canClick = true  
						 }
						},1000)
						
					}else{
						uni.showToast({
							title: '验证码发送失败',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			checkCode(code){
				console.log("finishcode")
				this.store.state.phonecode=code
				uni.navigateTo({
					url:"/pages/login/forgetPassword"
				})
				
			}
		}
	}
</script>

<style lang="less">
.code-input{
	display: flex;
	flex-direction: column;
	align-items:center;
	&__title{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: @font-color-grey;
		margin-bottom: @uni-spacing-row-lg;
		margin-top: @uni-spacing-row-lg;
		
	}
	&__count-text{
		color: @font-color-grey;
		
	}
	&__resend{
		color: @font-color-blue;
	}
}
</style>
